<template>
	<div class="collapse_container">
		<transition name="expand" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
			@before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave">
			<div v-show="isExpanded" class="panel">
				<!-- 面板内容 -->
				<slot></slot>
			</div>
		</transition>
		<div class="bottom_container">
			<el-button class="bottom_btn" @click="handleClick">
				{{ isExpanded ? '开始计算' : '展开' }}</el-button>
		</div>
	</div>
</template>

<script>
	import {
		nextTick
	} from 'vue';
	export default {
		name:"CollapsePanel",
		emits:["close"],
		data() {
			return {
				isExpanded: true,
			};
		},
		methods: {
			handleClick(){
				this.isExpanded = !this.isExpanded;
				if(!this.isExpanded){
					this.$emit("close");
				}
			},
			beforeEnter(el) {
				el.style.height = '0';
				el.style.opacity = '0';
			},
			enter(el, done) {
				el.offsetHeight; // 强制重绘
				el.style.height = `${el.scrollHeight}px`;
				el.style.opacity = '1';
				// 使用 setTimeout 来模拟1秒的过渡
				setTimeout(done, 1000);
			},
			afterEnter(el) {
				el.style.height = 'auto';
			},
			beforeLeave(el) {
				el.style.height = `${el.scrollHeight}px`;
				el.style.opacity = '1';
			},
			leave(el, done) {
				el.offsetHeight; // 强制重绘
				el.style.height = '0';
				el.style.opacity = '0';
				// 使用 setTimeout 来模拟1秒的过渡
				setTimeout(done, 1000);
			},
			afterLeave(el) {
				el.style.height = '';
				el.style.opacity = '';
			},
		},
	};
</script>

<style scoped>
	.collapse_container{
		position: absolute;
		z-index: 2;
	}
	.panel {
		overflow: hidden;
		transition: height 1s ease, opacity 1s ease;
		background-color: white;
		border-bottom: 1px solid #DCDFE6;
		/* 修改过渡时长为1秒 */
	}

	.expand-enter-active {
		transition: all 1s ease;
		/* 修改过渡时长为1秒 */
	}

	.expand-leave-active {
		transition: all 1s ease;
		/* 修改过渡时长为1秒 */
	}

	.expand-enter,
	.expand-leave-to

	/* 2.1.8+ 版本中使用 */
		{
		height: 0;
		opacity: 0;
	}

	.bottom_container {
		width: 100%;
		height: 30px;
		text-align: center;
	}

	.bottom_container .bottom_btn {
		width: 40%;
		height: 40px;
		font-size: 16px;
		border-top-right-radius: 0;
		border-top-left-radius: 0;
		border-top: 0px;
	}
</style>